
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
	  <ul class="breadcrumb">
        <li><a href="#">名片模板</a> <span class="divider">></span></li>
        <li class="active">添加属性</li>
      </ul>
	</div>

	
	 <div class="panel">
      <div class="panel-body">
        <p id="grid">
			
		</p>
      </div>
	  </div>


	<!-- 初始隐藏 dialog内容 -->
    <div id="content" class="hide  col-md-8">
      <form class="form-horizontal">
        <div class="row" >
		
          <div class="control-group">
            <label class="control-label"><s>*</s>属性名：</label>
            <div class="controls">
				
				<input type='hidden' name="id">
              <input name="attr" type="text" data-rules="{required:true}" class="input-normal control-text">
            </div>
			<span class="auxiliary-text">在前端显示的项目名</span>
          </div>
		  
	    </div>
		
		  <div class="row" >
		  
		 <div class="control-group">
            <label class="control-label"><s>*</s>坐标：</label>
            <div class="controls">
              <input name="coordinate" type="text" data-rules="{required:true}" class="input-normal control-text">
            </div>
		   <span class="auxiliary-text">在底版上的顶点坐标,格式x|y</span>
          </div>
		  
		 </div>
		 
		 		
        <div class="row">
		
          <div class="control-group">
            <label class="control-label"><s>*</s>属性类型：</label>
            <div class="controls">
              <select name="type" class="input-normal"> 
                <option value="">请选择</option>
                <option value="0">文本</option>
                <option value="1">多行文本</option>
				<option value="2">图像</option>
				<option value="3">图像或文本</option>
              </select>
            </div>
			   <span class="auxiliary-text">属性的类别</span>
          </div>
       
        </div>
		  
		  <div class="row" >
		  
		   <div class="control-group">
            <label class="control-label"><s>*</s>尺寸限制：</label>
            <div class="controls">
              <input name="size" type="text" data-rules="{required:true}" class="input-normal control-text">
            </div>
			  <span class="auxiliary-text">图片类型格式为: 宽|高 ，文本类型格式为最大限制字数的数值</span>
          </div>
		  
		  </div>
		  
		 <div class="row" >
          <div class="control-group">
            <label class="control-label"><s>*</s>排序：</label>
            <div class="controls">
              <input name="order" type="text" data-rules="{required:true,number : true}" class="input-normal control-text">
            </div>
			  <span class="auxiliary-text">属性执行的顺序，很重要，越往上的图层值越大</span>
          </div>
        </div>  

		
		<div class="row" >
          <div class="control-group">
            <label class="control-label"><s>(选填)</s>默认文字：</label>
            <div class="controls">
              <input name="tips" type="text" class="input-normal control-text">
            </div>
			  <span class="auxiliary-text">给文本框添加默认文字，一般用户示例或说明</span>
          </div>
        </div> 
		
      </form>
    </div>

	<!--隐藏的编辑层-->
<script type='text/javascript'>

var Form = BUI.Form;
new Form.Form({
	srcNode:'#form_add_main'
}).render();



</script>

<!-- script start-->  
    <script type="text/javascript">
            var Grid = BUI.Grid,
            Data = BUI.Data;
            var Grid = Grid,
          Store = Data.Store,
          enumObj = {"0" : "文本",'1' : "多行文本","2" : "图像",'3' : "文本或图像"},
          columns = [
            {title : '属性名',dataIndex :'attr'}, 
            {title : '坐标',dataIndex :'coordinate'},
			{title : '尺寸限制',dataIndex :'size'},
			 {title : '排序',dataIndex :'order'},
			 {title : '默认文字',dataIndex :'tips'},
            {title : '分类',dataIndex : 'type',renderer : Grid.Format.enumRenderer(enumObj)},
            {dataIndex:'id'},
			{title : '操作',renderer : function(){
              return '<span class="grid-command btn-edit">编辑</span>'
            }}
          ],
          data = [
		  
		  <?php 
				if($attrs):
				$c = count($attrs);
				foreach($attrs as $key => $attr){
			?>
			{
				 attr:'<?php echo $attr['attr'];?>',
				 coordinate:'<?php echo $attr['coordinate'];?>',
				 size:'<?php echo $attr['size'];?>',
				 order:'<?php echo $attr['order'];?>',
				 type:'<?php echo $attr['type'];?>',
				 id:'<?php echo $attr['id'];?>',
				 tips:'<?php echo $attr['tips'];?>'
			}
				 
			<?php			
				if($key<$c-1){echo ",";}
				}
				endif;
		  ?>
		  ];
 
        var isAddRemote = false,
          editing = new Grid.Plugins.DialogEditing({
            contentId : 'content', //设置隐藏的Dialog内容
            triggerCls : 'btn-edit', //触发显示Dialog的样式
            editor : {
              title : '模板属性',
			  success:function (){
				var edtor = this,
				form = edtor.get('form'),
				editType = editing.get('editType');//add 或者 edit
				
				 if(editType == "add"){
					url = "<?php echo site_url("ecard/addAttrAjax/".$eid)?>";
				 }else if(editType == "edit"){
					url = "<?php echo site_url("ecard/editAttr")?>";
				 }
				 
				  form.valid();
				  if(form.isValid()){
					form.ajaxSubmit({
						type:"post",
						url:url,
						success:function (data){
							
							if(data.success){
								
									edtor.accept();
							  }else{
									var field = data.field;
									form.getField(field).showErrors([data.error]);
							
							  }
						
						},
						error:function (){
							BUI.Message.Alert('出错了','error');
						}
						
					});
				  }
				  
				  
				 
			  }
            }
          }),
          store = new Store({
            data : data,
            autoLoad:true
          }),
          grid = new Grid.Grid({
            render:'#grid',
            columns : columns,
            width : 900,
            forceFit : true,
            tbar:{ //添加、删除
                items : [{
                  btnCls : 'button button-success',
                  text : '<i class="icon-plus icon-white"></i>添加',
                  listeners : {
                    'click' : addFunction
                  }
                },
                {
                  btnCls : 'button button-danger',
                  text : '<i class="icon-remove icon-white"></i>删除',
                  listeners : {
                    'click' : delFunction
                  }
                }]
            },
            plugins : [editing,Grid.Plugins.CheckSelection],
            store : store
          });
 
        grid.render();
		
		grid.findColumnByField('id').hide();//设置隐藏数据项
		
        //添加记录
        function addFunction(){
          var newData = {};
          editing.add(newData); //添加记录后，直接编辑
        }
		
        //删除选中的记录
        function delFunction(){
          var selections = grid.getSelection();
		  
		 var str = '';
		for(i in selections){
		
			str += selections[i]['id'];
			
			if(i<selections.length-1){ str += ",";}
		
		}
	
		 BUI.Message.Confirm('删除后不可恢复,确定删除吗:<br>'+str,function(){
			
				form = editing.get('form');
				form.ajaxSubmit({
					type :"post",
					url : "<?php echo site_url("ecard/deleteAttr")?>",
					data: "id="+str,
					success: function (){
						  store.remove(selections);
					}
				});
		
        },'question');
        
        }
	
    </script>
<!-- script end -->